import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

import { TabBar } from 'antd-mobile';

@withRouter
class NavLinkBar extends React.Component{
    static propTypes = {
        list: PropTypes.array.isRequired,
        msgCount: PropTypes.number.isRequired
    }
    render(){
        const list = this.props.list.filter((item) => !item.hide);
        const { pathname } = this.props.location;
        const { msgCount } = this.props;
        const badge = (path) => {
            return path === '/dashboard/msg' ? {badge: msgCount} : {}
        };
        return (
            <TabBar>
                {
                    list.map(item => {
                        return (
                            <TabBar.Item
                                title={item.text}
                                key={item.path}
                                icon={{uri: require(`@/assets/img/${item.icon}.png`)}}
                                selectedIcon={{uri: require(`@/assets/img/${item.icon}.1.png`)}}
                                selected={ pathname === item.path }
                                onPress={ () => {
                                    this.props.history.push(item.path);
                                } } 
                                {
                                    ...badge(item.path)
                                }
                            >

                            </TabBar.Item>
                        );
                    })
                }
            </TabBar>
        );
    }
}

export default NavLinkBar;